#<#assign propsJson="${propsJson}"?eval />
<template>
  <div class="back-border" :style="backBorderStyle">
    <div class="corner top-left" :style="cornerStyle"></div>
    <div class="corner top-right" :style="cornerStyle"></div>
    <div class="corner bottom-left" :style="cornerStyle"></div>
    <div class="corner bottom-right" :style="cornerStyle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backBorderStyle: {
        <#assign width=propsJson.borderIsShow?then(propsJson.borderWidth, 0) />
        borderWidth: "${width}px",
        borderColor: "${propsJson.borderColor}",
        borderStyle: "${propsJson.borderStyle}",
        <#--["--borderWidth"]: -Math.max(${width+1}, ${propsJson.cornerWidth+1}) + "px",-->
        ["--borderWidth"]: 0,
      },
      cornerStyle: {
        borderWidth: "${propsJson.cornerIsShow?string(propsJson.cornerWidth, "0")}px",
        borderColor: "${propsJson.cornerColor}",
        width: "${propsJson.cornerLength}px",
        height: "${propsJson.cornerLength}px",
      },
      <#if propsJson.prop??>
       prop: <#if (propsJson.prop?length>0)>"${propsJson.prop}"<#else>"default"</#if>
      </#if>
    }
  },
}
</script>

<style scoped lang="less">
.back-border {
  width: 100%;
  height: 100%;
}

.back-border .corner {
  position: absolute;
  border-style: solid;

  &.top-left {
    top: var(--borderWidth);
    left: var(--borderWidth);
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
  }

  &.top-right {
    top: var(--borderWidth);
    right: var(--borderWidth);
    border-left-color: transparent !important;
    border-bottom-color: transparent !important;
  }

  &.bottom-left {
    bottom: var(--borderWidth);
    left: var(--borderWidth);
    border-top-color: transparent !important;
    border-right-color: transparent !important;
  }

  &.bottom-right {
    bottom: var(--borderWidth);
    right: var(--borderWidth);
    border-left-color: transparent !important;
    border-top-color: transparent !important;
  }
}
</style>
